<template>
    <div class="index">
        <div style="width:100%;">
             <!-- <div style="border:1px solid rgb(240, 240, 240);;width:100%;margin:20px 0;"></div> -->
             <!-- <div class="left">
                  <div style="top">
                      <el-input v-model="input" size="medium" placeholder="请输入内容" style="width:260px;margin-right:10px;"></el-input>
                      <el-button type="primary" size="medium" plain >查询</el-button>
                  </div>
             </div> 
             -->
<!-- 列表     -->
          <el-button icon="el-icon-download" type="warning"  @click="handleExport">导出</el-button>
          <div style="width:100%;">
            <el-table :data="tableData" border style="width: 100%"> 
                <el-table-column type="index" label="序号" align="center" width="200"/>
                <el-table-column prop="name" label="设备号"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220px">
                  <template slot-scope="{row}">
                    <el-button  type="text" @click="handleUpdate(row)">
                      绑定地址
                    </el-button> 
                    <!-- <el-button  type="text" @click="hanlePeople(row)">
                      查看人员
                    </el-button>  -->
                  </template>
                </el-table-column>
              </el-table>
          </div>
          <div class="right">
            <el-pagination :current-page="currentPage" :page-sizes="[5,10, 15,20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
          </div>
<!-- 弹框 -->
          <el-dialog :title="title" :visible.sync="dialogVisible" width="45%" append-to-body :closeOnClickModal="false" :before-close="cancel" > 
              <el-form :model="formData" ref="formData"   label-width="100px" label-suffix=":">
                <!-- :show-count="true" check-strictly选中子后父节点不显示、show-checkbox显示复选框、clickbox单选 @check-change="handleCheckChange"多选-->
                  <el-form-item label="地址" prop="id" class="Style">
                    <!-- <treeselect v-model="formData.id" :options="deptOptions"  @nodeClick="nodeClick"  placeholder="请选择地址" /> -->
                    <el-tree :data="deptOptions" :props="defaultProps" ref="CheckChange"
                      node-key='id'
                      @check='clickbox'
                      @node-click="nodeClick" 
                      :load="loadNode" lazy 
                      show-checkbox
                      check-strictly
                      ></el-tree>
                  </el-form-item>
              </el-form>
              <div style="text-align:center">
                <el-button type="primary" icon="el-icon-finished" @click="submitForm">保 存</el-button>
                <el-button type="danger" @click="cancel" icon="el-icon-circle-close">关 闭</el-button>
              </div>
          </el-dialog>
      </div>
    </div>
</template>

<script>
  // import Treeselect from '@riophae/vue-treeselect'
  // import '@riophae/vue-treeselect/dist/vue-treeselect.css'


 export default {
      components: {  },
      data() {
        return {
          dialogVisible: false,
          tableData: [],//列表
          userListAll:'',
          title:"",
          formData:{
            id:undefined,
            name:undefined,
          },//表单
          // 地址树选项
          deptOptions: [],
          defaultProps: {//默认父节点
            children: 'children',
            label: 'name',
            isLeaf:true
          },
          total: 0,
          currentPage: 1,
          // 查询参数
          queryParams: {
            // name:undefined,//设备号
            
          },
          page: 1,
          pageSize: 5,
          name:'',//
          pid:0,
          deptId:'',//选中id
          node:'',
          nodeisChecked:''
        }
      },
      created(){
        this.getList()

      },
      methods:{
        // /monitor/Sys/sn/getSn
          getList(){//列表
            this.axios({
                url:'/monitor/Sys/sn/getSn',
                method:'get',
            }).then(res=>{
                // this.tableData = res.data.date
                this.userListAll=res.data.date
                this.tableData=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
                this.total=this.userListAll.length
            })
          },
           /** 查询下拉树结构 */
          getTreeselect() {
            this.axios({
                url:'/monitor/Sys/dept/getpid?pid=0',
                method:'post',
            }).then(response => {
              this.deptOptions = response.data.data;
            });
          },
           dg(){
            if(this.pid!=0){
                this.axios.post('/monitor/Sys/dept/getpid?pid='+this.pid).then(res=>{
                    if(res.status==200){
                        this.foreachFunc(this.deptOptions,res.data.data)
                        // this.$forceUpdate()
                        console.log('地址数组',this.deptOptions)
                    }else{
                        alert(res.data.msg)
                    }
                })
            }
          },
          foreachFunc(arr,children){
              var that=this
              arr.forEach(function(e,index){
                  if(e.id==that.pid){
                      e.children=children
                  }else{
                      that.foreachFunc(e.children,children)
                  }
              })
          },
          nodeClick(data){//点击展开子集
            this.pid = data.id
            this.dg()
          },
          loadNode(node, resolve){
              if(node.level==0){
                  return resolve(node.data)
              }
              setTimeout(()=>{
                  resolve(node.data.children);
              },300)
              if (node.level >= 1) {
                return 
              }
          },
          clickbox(node, tree) {//单选选中
              if (tree.checkedKeys.length == 0) {
                this.$refs.CheckChange.setCheckedKeys([]);
                this.node = node;
                this.nodeisChecked = false;
              } else {
                this.$refs.CheckChange.setCheckedKeys([]);
                this.$refs.CheckChange.setCheckedKeys([node.id]);
                this.node = node;
                this.nodeisChecked = true;
              }
              this.deptId =node.id
              console.log(this.deptId,'this.deptId')
          },
          // handleCheckChange(data, checked, node){//勾选事件
          //     console.log(data, checked, node,'333');
          //     // if(checked){
          //     //   this.$refs.CheckChange.setCheckedNodes(data);
          //     // }
          //     this.deptId = data.id
          // },
          handleUpdate(row) {
              this.name = row.name//确定，传参
              this.getTreeselect()
              this.title='设备-绑定地址'
              this.dialogVisible = true
          },
          /** 提交按钮 */
          submitForm() {
              this.$refs["formData"].validate(valid => {
                  if (valid) {
                      if (this.name) {
                        let params ={
                          sn:this.name,//设备号
                          // deptId:this.pid,//地址id
                          deptId:this.deptId,//地址id
                        }
                        console.log(params.deptId,'p-deptId');
                        this.axios({
                            url:'/monitor/Sys/deptsn/save',
                            method:'post',
                            data:params,
                        }).then(res=>{
                              this.$message({ type: "success", message: "绑定成功!",});
                              this.dialogVisible = false
                              this.getList()//刷新列表
                              this.cancel()//清空输入框
                        })
                      } 
                      else {
                        this.$message({ type: "success", message: "系统异常，请联系管理员!",});
                      }
                  }
              });
          },
          cancel(){//关闭清空输入框
              this.dialogVisible = false
              this.$refs.formData.resetFields()
              this.formData = {//重置输入框，放初始值
                  name:'',
              }
              this.getList()//刷新列表
          },
        // hanlePeople(row){//查看人员
        //   this.$router.push({name: "People",params: { row: row },});
        // },  
        handleSizeChange(val) {//分页
            this.pageSize = val;
            this.tableData=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
            this.total=this.userListAll.length
        //   this.getList();
        },
        handleCurrentChange(val) {//分页
            this.page = val;
            this.tableData=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
            this.total=this.userListAll.length
        //   this.getList();
        },
        handleExport() {
					const Title = this.Title
					console.log(Title,'Title')
					import('@/vendor/Export2Excel').then(excel => {
					const tHeader =  ['设备号']
							const filterValue =['name']
							let Data = this.userListAll
							const list = Data;
							const data = this.formatJson(filterValue, list);
							excel.export_json_to_excel({
									header: tHeader,
									data,
									filename:'设备表'
							})
					});
			},
			formatJson(filterVal, jsonData) {
					return jsonData.map((v) => filterVal.map((j) => v[j]));
			}
      },

    }
</script>
<style scoped>
 .Style >>> .el-icon-caret-right:before{
  color: black !important;
}
.index{
     min-height: calc(100% - 84px);
     position: relative; 
     min-width: calc(100% - 204px);
}
.left{
    width: 100%;
    display: flex;justify-content: space-between;
}
.top{
    display: flex;justify-content: left;
}
/* .right{
    position: absolute;
    left:50%;
    bottom:-50px;
    transform: translate(-50%);
} */
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}

.mask .content {
  width: 600px;
  height: 400px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30PX;
}

.mask .content-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.mask .content-top img {
  width: 25px;
}

.content-items {
  margin: 40px 0 0 40px;
}

.content-items .item {
  margin: 12px 10px;
  display: flex;
  align-items: center;
}

.content-items .item span:first-child {
  display: inline-block;
  width: 100px;
}
.content-bottom{
  margin: 30px 0 0 150px;
}
</style>